import { Collapse, Select, CollapseProps } from "antd";
import { useComponetsStore } from "../../store/components";
import { useComponentConfigStore } from "../../store/component-config";
import { GoToLink } from "./Actions/GoToLink";
import { ShowMessage } from "./Actions/ShowMessage";

export function ComponentEvent() {
	const { curComponentId, curComponent, updateComponentProps } = useComponetsStore();
	const { componentConfig } = useComponentConfigStore();

	const selectAction = (eventName: string, value: string) => {
		if (!curComponentId) return;
		updateComponentProps(curComponentId, { [eventName]: { type: value } });
	};


	if (!curComponent) return null;

	const items: CollapseProps["items"] = (
		componentConfig[curComponent.name].events || []
	).map((event) => {
		return {
			key: event.name,
			label: event.label,
			children: (
				<div>
					<div className="flex items-center">
						<div>动作：</div>
						<Select
							className="select"
							options={[
								{ label: "显示提示", value: "showMessage" },
								{ label: "跳转链接", value: "goToLink" },
							]}
							value={curComponent?.props?.[event.name]?.type}
							onChange={(value) => {
								selectAction(event.name, value);
							}}
						/>
					</div>
					{curComponent?.props?.[event.name]?.type === "goToLink" && (<GoToLink event={event}/>)}
                    {curComponent?.props?.[event.name]?.type === 'showMessage' && (<ShowMessage event={event}/>)}
				</div>
			),
		};
	});

	return (
		<div style={{padding:"12px"}}>
			<Collapse style={{marginBottom:"12px"}} items={items} />
		</div>
	);
}
